<script setup lang="ts">
import myTopic from "@/composables/myTopic.ts";
import errorsStore from "@/piniaStore/errorsStore.ts";

const router = useRouter();
const {form, addTopic, getCats, cats} = myTopic();
await getCats();
const add = async () => {
  const res = await addTopic(form);
  router.push({name: 'front.topic.show',params:{t_id:res.data.id}});
}
const clearError = (name: string) => {
  errorsStore().clearError(name);
}
</script>

<template>
  <main class="addTopic">
    <el-card shadow="hover">
      <template #header>
        <div class="title">
          <icon-add-picture theme="outline" size="20"/>&nbsp;
          <span>发布帖子</span>
        </div>
      </template>
      <el-form label-width="120px" v-if="cats">
        <el-form-item label="选择帖子大类">
          <el-select v-model="form.cat_id" placeholder="请选择帖子大类" @change="clearError('cat_id')">
            <el-option :label="cat.title" :value="cat.id"
                       v-for="(cat,index) in cats" :key="index"
            />
          </el-select>
          <my-error name="cat_id"/>
        </el-form-item>
        <el-form-item label="帖子标题">
          <el-input v-model="form.title" placeholder="请输入帖子标题" @focus="clearError('title')"/>
          <my-error name="title"/>
        </el-form-item>
        <el-form-item label="帖子内容">
          <markdown-editor v-model="form.content" />
<!--          <el-input v-model="form.content" type="textarea"-->
<!--                    placeholder="请输入帖子内容"-->
<!--                    @focus="clearError('content')"/>-->
          <my-error name="content"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">发布帖子</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </main>
</template>

<style lang="scss" scoped>
main.addTopic {
  @apply min-h-screen p-3;
  div.title {
    @apply flex items-center text-slate-600;
  }
}
</style>